<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="员工姓名">
<input type="text" placeholder="工资">
<input type="text" placeholder="工作">
<input type="button" value="添加">
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th><th>工资</th><th>工作</th><th>操作</th>
    </tr>
</table>
<!--引入jQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //准备一个数组里面装着三个员工的信息
    let arr = [{name:"刘备",salary:2000,job:"程序员"},
        {name:"关羽",salary:3000,job:"销售"},
        {name:"张飞",salary:4000,job:"人事"}]
    //遍历数组网页面中添加tr和td的组合
    for (let i = 0; i < arr.length; i++) {
        let emp = arr[i];//遍历每一个员工对象
        //把员工信息显示到页面中
        addEmp(emp);
    }
    //1.给按钮动态添加点击事件
    $("input:eq(3)").click(function () {
        //创建一个空的员工对象
        let emp = {};
        //给对象添加三个属性并赋值
        emp.name = $("input:eq(0)").val();
        emp.salary = $("input:eq(1)").val();
        emp.job = $("input:eq(2)").val();
        //把对象显示到页面中
        addEmp(emp);
    })

    function addEmp(emp) {
        //2.在事件里面创建一个tr和4个td
        let tr = $("<tr></tr>");
        let nametd = $("<td></td>");
        let saltd = $("<td></td>");
        let jobtd = $("<td></td>");
        let deltd = $("<td><input type='button' value='删除'></td>");
        deltd.children().click(function () {
            //删除当前行
            tr.remove();
        })
        //3.取出文本框中的文本设置给td
        nametd.text(emp.name);
        saltd.text(emp.salary);
        jobtd.text(emp.job);
        //4.把3个td装进tr
        tr.append(nametd);
        tr.append(saltd);
        tr.append(jobtd);
        tr.append(deltd);
        //5.把tr装进table
        $("table").append(tr);
    }

</script>
</body>
</html>